<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import api from "@/api/api";
import { Decimal } from "decimal.js";

// 定义 props
const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
  type: {
    type: Number,
    default: 3,
  },
})

// 响应式数据
const totalPrice = ref(0)

// 路由
const router = useRouter()

// 计算属性
const getTypeName = computed(() => {
  if (props.type == 0) {
    return "待付款";
  } else if (props.type == 1) {
    return "支付中";
  } else if (props.type == 2) {
    return "已付款";
  } else if (props.type == 3) {
    return "退款中";
  } else if (props.type == 11) {
    return "待自提";
  } else if (props.type == 21) {
    return "待发货";
  } else if (props.type == 22) {
    return "待收货";
  } else if (props.type == 31) {
    return "待核销";
  } else if (props.type == 8) {
    return "待评价";
  } else if (props.type == 4) {
    return "待退款";
  } else if (props.type == 99) {
    return "已取消";
  } else if (props.type == 100) {
    return '已完成'
  }
  return "";
})

const getAfterSaleTypeName = (type) => {
  if (type == 0) {
    return "申请中";
  } else if (type == 11) {
    return "已通过";
  } else if (type == 12) {
    return "已拒绝";
  } else if (type == 13) {
    return "待卖家收货";
  } else if (type == 14) {
    return "卖家确认收货";
  } else if (type == 15) {
    return "卖家终止售后";
  } else if (type == 1) {
    return "买家取消售后";
  } else if (type == 16) {
    return "等待平台退款";
  } else if (type == 100) {
    return "已完成";
  }
  return "";
}

// 方法定义
const goComment = () => {
  router.push({
    path: "/comment",
    query: {
      sn: props.item.sn,
      orderItemSn: props.item.orderItems[0].sn
    }
  });
}

const pay = async () => {
  Toast.loading('加载中')
  let res = await api.pay.pay({
    sn: props.item.sn
  })
  Toast.clear()
  if (res) {
    window.location.href = res;
  } else {
    Toast.fail({
      message: "支付失败",
    });
  }
}

const cancleOrder = async () => {
  await api.order.cancleOrder({
    orderSn: props.item.sn
  })
  Toast('取消订单成功')
  emit('refresh')
}

// 定义 emits
const emit = defineEmits(['refresh'])

// 生命周期钩子
onMounted(() => {
  if (props.type != 4) {
    let total = new Decimal("0");
    props.item.orderItems.forEach((e) => {
      let ePrice = new Decimal(String(e.subTotal));
      total = total.plus(ePrice);
    });
    totalPrice.value = total.toString();
  }
})
</script>
<template>
  <div class="orderItem">
    <div class="top">
      <div class="store_name">{{ item.storeName }}</div>
      <div class="serve_type">{{ type != 4 ? getTypeName : getAfterSaleTypeName(item.serviceStatus) }}</div>
    </div>
    <template v-if="type == 4">
      <div class="info">
        <div class="info_left">
          <van-image class="left_icon" :src="item.goodsImage" />
          <div class="serve_name van-multi-ellipsis--l2">
            {{ item.goodsName }}
          </div>
        </div>
        <div class="info_right">
          <div class="right_price">￥{{ item.flowPrice }}</div>
          <div class="right_num">x{{ item.num }}</div>
        </div>
      </div>
    </template>
    <template v-else>
      <div v-for="(v, i) in item.orderItems" :key="i" class="info">
        <div class="info_left">
          <van-image class="left_icon" :src="v.image" />
          <div class="serve_name van-multi-ellipsis--l2">
            {{ v.goodsName }}
          </div>
        </div>
        <div class="info_right">
          <div class="right_price">￥{{ v.skuPrice }}</div>
          <div class="right_num">x{{ v.num }}</div>
        </div>
      </div>
    </template>
    <div class="price">
      {{ type == 0 ? "应付款" : "实付款" }}：￥{{ type == 4 ? item.flowPrice : totalPrice }}
    </div>
    <div class="btn">
      <van-button v-if="item.allowOperationVO?.pay" round class="pay" @click.stop="pay">立即付款</van-button>
      <van-button v-if="item?.allowOperationVO?.cancel" round class="pay" @click.stop="cancleOrder">取消订单</van-button>
      <van-button v-if="item?.allowOperationVO?.evaluate" round class="comment" @click.stop="goComment">去评价</van-button>
    </div>
  </div>
</template>



<style lang="less" scoped>
.orderItem {
  width: 100%;
  padding: 30px 50px;
  border-bottom: 3px solid #f1f1f1;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .store_name {
      max-width: 730px;
      font-size: 50px;
      font-weight: bold;
    }

    .serve_type {
      font-size: 40px;
      color: #406dfc;
    }
  }

  .info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20px;

    .info_left {
      display: flex;
      align-items: flex-start;

      .left_icon {
        width: 200px;
        height: 200px;
      }

      .serve_name {
        font-size: 40px;
        color: #888888;
        margin-left: 30px;
        max-width: 700px;
      }
    }

    .info_right {

      .right_price,
      .right_num {
        font-size: 40px;
        color: #888;
        text-align: right;
      }
    }
  }

  .price {
    width: 100%;
    text-align: right;
    font-size: 46px;
    color: #333333;
  }

  .btn {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;

    .pay,
    .comment {
      height: 95px;
      border: unset;
      color: #fff;
      margin: 0 0 0 15px;
    }

    .pay {
      background: linear-gradient(to right, #0160ea, #00bffa);
    }

    .comment {
      background: linear-gradient(to right, #f28c43, #ffb11d);
    }
  }
}
</style>
